<template>
    <div class="appcontainer">
        <!-- 大图 -->
        <div class="bigimg">
            <div class="inbigimg">
                <div class="bigimgtitle" v-if="language == 'zh'">
                    差异疾病生物标志物
                </div>
                <div class="bigimgtitle" v-else>Differential Disease Biomarkers</div>
            </div>
        </div>
        <!-- 底部 -->
         <div class="botcontent">
            <el-row>
                <el-col :span="5">
                    <div class="pagecontent">
                        <div class="pageitem" v-for="(item,index) in pageList" :key="index" :style="{background:pageindex == index ? 'linear-gradient(to right,#fff,#f0f4ff)' : ''}" @click="changepage(item,index)">
                            <div class="pageitem_content" :style="{borderColor:pageindex == index ? '#0a79fd' : '',padding:language == 'zh' ? '' : '6px 10px 6px 10px'}">
                                <img src="../../img/swbzw.png" alt="" style="width: 14px;height: 14px;margin-right: 12px;" v-if="index == 0">
                                <img src="../../img/sjjcy.png" alt="" style="width: 14px;height: 14px;margin-right: 12px;" v-if="index == 1">
                                <img src="../../img/swbzwjsjg.png" alt="" style="width: 14px;height: 14px;margin-right: 12px;" v-if="index == 2">
                                <span :style="{color:pageindex == index ? '#0a79fd' : ''}">{{language == 'zh' ? item.label : item.enlabel}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="19" style="padding-left: 10px;box-sizing: border-box;">
                    <swbzwzydzl v-if="pageindex == 0"></swbzwzydzl>
                    <sjjcyjgbg v-if="pageindex == 1"></sjjcyjgbg>
                    <swbzwjsjgzs v-if="pageindex == 2"></swbzwjsjgzs>
                </el-col>
            </el-row>
         </div>
    </div>
</template>

<script>
    import swbzwzydzl from './common/swbzwzydzl.vue'
    import sjjcyjgbg from './common/sjjcyjgbg.vue'
    import swbzwjsjgzs from './common/swbzwjsjgzs.vue'
    export default {
        name: 'HospitalwebsiteIndex',
        props: [],
        components: {
            swbzwzydzl,
            sjjcyjgbg,
            swbzwjsjgzs
        },
        data() {
            return {
                language: '',
                pageList:[
                    {
                        label:'生物标志物重要度总览',
                        enlabel:'Overview of the Importance of Biomarkers'
                    },
                    {
                        label:'数据集差异结果表格',
                        enlabel:'Dataset Difference Results Table'
                    },
                    {
                        label:'生物标志物计算结果展示',
                        enlabel:'Display of biomarker calculation results'
                    }
                ],
                pageindex:0
            };
        },
        created() {
            this.language = sessionStorage.getItem('language')
            window.addEventListener('setItem', this.languages);
        },
        mounted() {

        },
        methods: {
            // 监听session中language的变化
            languages(e) {
                console.log(e, 8888888888888)
                this.language = sessionStorage.getItem('language')
                console.log(this.language, 5555555555)
            },
            // 切换tab
            changepage(item,index){
                this.pageindex = index
            }
        },
        beforeDestroy() {
            this.language = null
            window.removeEventListener('setItem', this.languages);
        },
    };
</script>
<style scoped>
    .appcontainer {
        width: 100%;
        background-color: #fff;
    }

    .bigimg {
        width: 100%;
        height: 433px;
        padding: 180px 0;
        box-sizing: border-box;
        background-image: url('../../img/bzw.png');
        background-size: 100% 100%;
    }

    .inbigimg {
        width: 70%;
        margin: 0 auto;
        position: relative;
    }

    .bigimgtitle {
        font-size: 62px;
        color: #0d48ba;
        margin-bottom: 59px;
    }
    .botcontent{
        width: 70%;
        margin: 0 auto;
        padding: 22px 0;
        box-sizing: border-box;
    }
    .pagecontent{
        width: 100%;
        background-color: #eaf2ff;
        border-radius: 20px;
        padding: 24px 0 10px 0;
        box-sizing: border-box;
    }
    .pageitem{
        padding: 16px 0;
        box-sizing: border-box;
        cursor: pointer;
    }
    .pageitem_content{
        border-left: 4px solid transparent;
        padding: 6px 0 6px 26px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
</style>